<template>
	<div class="page">
		<div style="padding: 10px;">
			<el-collapse accordion>
				<el-collapse-item>
					<template slot="title">
						高级搜索
					</template>
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="枚举项编码">
							<el-input v-model="formInline.user" size="small" placeholder="枚举项编码"></el-input>
						</el-form-item>
						<el-form-item label="枚举项值">
							<el-input v-model="formInline.user" size="small" placeholder="枚举项值"></el-input>
						</el-form-item>
						<div style="display: flex;justify-content: center;padding-bottom: 10px;padding-top: 10px;">
							<el-button class="el-main-color" icon="el-icon-delete" size="mini" @click="showDialog(1)">清除</el-button>
							<el-button class="el-main-color" icon="el-icon-search" size="mini" @click="showDialog(1)">查询</el-button>
						</div>
					</el-form>
				</el-collapse-item>
			</el-collapse>
		</div>
		<div class="enum-main">
			<div class="menu-header">
				<el-button class="el-main-color" icon="el-icon-plus" size="mini" @click="showDialog(1)">新增枚举项</el-button>
				<div class="block">
					<el-pagination @size-change="itemHandleSizeChange" @current-change="itemHandleCurrentChange" :current-page.sync="itemCurrentPage" :page-sizes="itemPageSizes" :page-size="itemPageSize" layout="sizes, prev, pager, next" :total="itemTotal">
					</el-pagination>
				</div>
			</div>
			<el-table :data="items" border style="width: 100%;" highlight-current-row @row-dblclick="dbClick" @row-click="rowClick" v-loading="items.length == 0" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">">
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="enumCode" label="枚举项编码" width="180">
				</el-table-column>
				<el-table-column prop="enumName" label="枚举项值" width="180">
				</el-table-column>
				<el-table-column prop="companyCode" label="所属公司" width="180">
				</el-table-column>
				<el-table-column prop="status" :formatter="changeStatus" label="是否启用" width="180">
				</el-table-column>
				<el-table-column prop="createDate" :formatter="format" label="创建时间" width="180">
				</el-table-column>
				<el-table-column prop="remark" label="备注信息">
				</el-table-column>
			</el-table>
		</div>
		<div class="enum-main">
			<div class="menu-header">
				<el-button class="el-main-color" icon="el-icon-plus" size="mini" @click="showDialog(2)">新增枚举值</el-button>
				<div class="block">
					<el-pagination @size-change="sonHandleSizeChange" @current-change="sonHandleCurrentChange" :current-page.sync="sonCurrentPage" :page-sizes="itemPageSizes" :page-size="sonPageSize" layout="sizes, prev, pager, next" :total="sonTotal">
					</el-pagination>
				</div>
			</div>
			<el-table :data="sonItems" ref="enum" border style="width: 100%;" highlight-current-row @row-dblclick="sonDbClick" v-loading="sonLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="enumCode" label="枚举编码" width="180">
				</el-table-column>
				<el-table-column prop="enumName" label="枚举值" width="180">
				</el-table-column>
				<el-table-column prop="status" :formatter="changeStatus" label="是否启用" width="180">
				</el-table-column>
				<el-table-column prop="createDate" :formatter="format" label="创建时间" width="180">
				</el-table-column>
				<el-table-column prop="remark" label="备注信息">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button @click="addSonEnum(scope.row)" type="text" size="mini">编辑子集</el-button>
						<el-button @click="sonDbClick(scope.row)" type="text" size="mini">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :title="e.id?'编辑枚举项':'新增枚举项'" :visible.sync="dialogEnumVisible">
			<el-form ref="menu" :model="e" label-width="80px" style="text-align: left;">
				<el-form-item label="枚举名称">
					<el-input v-model="e.enumName"></el-input>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="e.status"></el-switch>
				</el-form-item>
				<el-form-item label="备注信息">
					<el-input type="textarea" rows="4" placeholder="菜单备注信息" v-model="e.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteEnum(e)">删除</el-button>
				<el-button @click="dialogEnumVisible = false" icon="el-icon-close" size="small">取 消</el-button>
				<el-button type="primary" @click="addEnum(e)" icon="el-icon-edit" size="small" :loading="newSaveButtonStatus">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="se.id?'编辑枚举值':'新增枚举值'" :visible.sync="dialogSonEnumVisible" append-to-body>
			<el-form ref="menu" :model="se" label-width="80px" style="text-align: left;">
				<el-form-item label="枚举项编码">
					<el-input v-model="se.parentCode" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="枚举值">
					<el-input v-model="se.enumName"></el-input>
				</el-form-item>
				<el-form-item label="是否启用">
					<el-switch v-model="se.status"></el-switch>
				</el-form-item>
				<el-form-item label="备注信息">
					<el-input type="textarea" rows="4" placeholder="菜单备注信息" v-model="se.remark"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteEnum(se)">删除</el-button>
				<el-button @click="dialogSonEnumVisible = false" icon="el-icon-close" size="small">取 消</el-button>
				<el-button type="primary" @click="addEnum(se)" icon="el-icon-edit" size="small" :loading="newSaveButtonStatus">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="'编辑枚举'+see.enumName+'的子集'" :visible.sync="dialogssVisible">
			<div class="menu-header">
				<el-button class="el-main-color" icon="el-icon-plus" size="mini" @click="showDialog(3)">新增枚举子集</el-button>
				<div class="block">
					<el-pagination @size-change="ssonHandleSizeChange" @current-change="ssonHandleCurrentChange" :current-page.sync="ssonCurrentPage" :page-sizes="itemPageSizes" :page-size="ssonPageSize" layout="sizes, prev, pager, next" :total="ssonTotal">
					</el-pagination>
				</div>
			</div>
			<el-table :data="ssonItems">
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column prop="enumCode" label="枚举编码" width="100">
				</el-table-column>
				<el-table-column prop="enumName" label="枚举值" width="100">
				</el-table-column>
				<el-table-column prop="status" :formatter="changeStatus" label="是否启用" width="100">
				</el-table-column>
				<el-table-column prop="remark" label="备注信息">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button @click="sonDbClick(scope.row)" type="text" size="mini">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>

</template>
<style>
	@import url("../../common/common.css");
	@import url("enum.css");
</style>
<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				items: [],
				itemCurrentPage: 1,
				itemPageSize: 5,
				itemPageSizes: [5, 10, 15, 20],
				dialogEnumVisible: false,
				newSaveButtonStatus: false,
				dialogSonEnumVisible: false,
				dialogssVisible: false,
				e: {
					status: true,
					parentCode: '0'
				},
				se: {
					status: true
				},
				sonItems: [],
				ssonItems: [],
				sonCurrentPage: 1,
				sonPageSize: 5,
				ssonCurrentPage: 1,
				ssonPageSize: 5,
				itemTotal: 0,
				sonTotal: 0,
				ssonTotal: 0,
				formInline: {},
				sonLoading: false,
				see: {}
			}
		},
		created() {
			this.getList();
		},
		mounted() {

		},
		methods: {
			getList() {
				var _self = this;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/list?pageNo=' + _self.itemCurrentPage + '&pageSize=' + _self.itemPageSize,
					data: {
						parentCode: '0'
					},
					success: function(res) {
						_self.items = res.dataList;
						_self.itemTotal = res.total;

					}
				})
			},
			getSonList() {
				var _self = this;
				_self.sonLoading = true;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/list?pageNo=' + _self.sonCurrentPage + '&pageSize=' + _self.sonPageSize,
					data: {
						parentCode: _self.se.parentCode
					},
					success: function(res) {
						_self.sonItems = res.dataList;
						_self.sonTotal = res.total;
						_self.sonLoading = false;

					}
				})
			},
			getSsonList() {
				var _self = this;
				_self.sonLoading = true;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/list?pageNo=' + _self.ssonCurrentPage + '&pageSize=' + _self.ssonPageSize,
					data: {
						parentCode: _self.se.parentCode
					},
					success: function(res) {
						_self.ssonItems = res.dataList;
						_self.ssonTotal = res.total;
						_self.sonLoading = false;

					}
				})
			},
			format(row, column, cellValue, index) {
				return new Date(row.createDate).Format('yyyy-MM-dd hh:mm:ss');
			},
			changeStatus(row, column, cellValue, index) {
				return row.status ? '启用' : '未启用'
			},
			showDialog(index) {
				if(index == 1) {
					this.e = {
						status: true,
						parentCode: '0'
					}
					this.dialogEnumVisible = true;
				} else if(index == 2) {

					this.dialogSonEnumVisible = true;
				}else if(index == 3) {
					delete this.se['id'];
					this.dialogSonEnumVisible = true;
				}
			},
			addEnum(item) {
				var _self = this;
				_self.newSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: 'POST',
					url: 'enum/',
					data: item,
					success: function(res) { //若是parentCode == 0表示枚举项

						if(res.parentCode == '0') {
							if(_self.e.id) { //表示编辑
								_self.updateItem(_self.items, res);
							} else { //表示新增
								_self.items.push(res);
							}
							_self.newSaveButtonStatus = false;
							_self.dialogEnumVisible = false;
						} else {

							if(_self.dialogssVisible) {
								if(_self.se.id) { //表示编辑
									_self.updateItem(_self.ssonItems, res);
								} else { //表示新增
									_self.ssonItems.push(res);
								}
							} else {
								if(_self.se.id) { //表示编辑
									_self.updateItem(_self.sonItems, res);
								} else { //表示新增
									_self.sonItems.push(res);
								}
							}

							_self.dialogSonEnumVisible = false;
							_self.newSaveButtonStatus = false;
						}

						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				});
			},
			deleteEnum(item) {
				var _self = this;
				_self.newSaveButtonStatus = true;
				this.utils.ajaxJSON({
					type: 'DELETE',
					url: 'enum/',
					data: item,
					success: function(res) { //若是parentCode == 0表示枚举项
						if(res.parentCode == '0') {
							if(_self.e.id) { //表示枚举项
								_self.deleteItem(_self.items, res);
							}
							_self.newSaveButtonStatus = false;
							_self.dialogEnumVisible = false;
						} else {
							if(_self.dialogssVisible) {
								if(_self.se.id) { //表示枚举值
									_self.deleteItem(_self.ssonItems, res);
								}
							} else {
								if(_self.se.id) { //表示枚举值
									_self.deleteItem(_self.sonItems, res);
								}
							}
							_self.dialogSonEnumVisible = false;
							_self.newSaveButtonStatus = false;
						}

						_self.$message({
							type: 'success',
							message: '操作成功!'
						});
					}
				});
			},
			updateItem(items, item) {
				for(var index in items) {
					if(items[index].id == item.id) {
						this.$set(items, index, item);
					}
				}
			},
			deleteItem(items, item) {
				for(var index in items) {
					if(items[index].id == item.id) {
						items.splice(index, 1);
					}
				}
			},
			itemHandleSizeChange(val) {
				console.log(`item每页 ${val} 条`);
				this.itemPageSize = val;
				this.getList();
			},
			itemHandleCurrentChange(val) {
				console.log(`item当前页: ${val}`);
				this.itemCurrentPage = val;
				this.getList();
			},
			sonHandleSizeChange(val) {
				console.log(`son每页 ${val} 条`);
				this.sonPageSize = val;
				this.getSonList();
			},
			sonHandleCurrentChange(val) {
				console.log(`son当前页: ${val}`);
				this.sonCurrentPage = val;
				this.getSonList();
			},
			ssonHandleSizeChange(val) {
				console.log(`son每页 ${val} 条`);
				this.ssonPageSize = val;
				this.getSsonList();
			},
			ssonHandleCurrentChange(val) {
				console.log(`son当前页: ${val}`);
				this.ssonCurrentPage = val;
				this.getSsonList();
			},
			dbClick(row) {
				this.e = JSON.parse(JSON.stringify(row));
				this.dialogEnumVisible = true;
			},
			sonDbClick(row) {
				this.se = JSON.parse(JSON.stringify(row));
				this.dialogSonEnumVisible = true;
			},
			rowClick(row) {
				this.se = {
					parentCode: row.enumCode,
					status: true
				}
				this.getSonList();
			},
			/**
			 * 配新增子集
			 */
			addSonEnum: function(row) {
				this.see = JSON.parse(JSON.stringify(row));
				this.se = {
					parentCode: row.enumCode,
					status: true
				};
				this.getSsonList();
				this.dialogssVisible = true;
			},
			/**
			 * 修改用户信息
			 */
			editSonEnum: function(scope) {
				var _self = this;
				this.dialogEditUserVisible = true;
				_self.editUserObj.id = scope.userId;
				_self.editUserObj.userName = scope.userName;
				_self.editUserObj.emil = scope.email;
				_self.editUserObj.status = scope.status;
				_self.editUserObj.remark = scope.remark;
				_self.editUserObj.userCode = scope.userCode;

			}

		},
		watch: {

		}
	}
</script>